<template>
  <view class="familyAuthorization-box">
    <view class="title-box">
      <u-cell-group>
        <u-cell-item title="新增成员" :arrow="false" :title-style="{fontSize:'40rpx',fontWeight:700,color:'#000'}">
          <text class="but-right" @click="openFamilyTwo">成员列表</text>
        </u-cell-item>
      </u-cell-group>
    </view>

    <view class="form">
      <u-form :model="form" ref="uForm" :label-style="{'paddingLeft':'10rpx'}">
        <view class="item-box">
          <u-form-item label="姓名" prop="name">
            <u-input placeholder="请输入姓名" v-model="form.name" />
          </u-form-item>
          <u-form-item label="手机号" prop="mobile">
            <u-input type="number" placeholder="请输入手机号" :maxlength="11" v-model="form.mobile" />
          </u-form-item>
        </view>
        <view class="item-box">
          <u-form-item label="选择身份">
            <view @tap="selectBol.householdType=true" class="wd-100">
              <u-section :title="displayLable || '请选择'" :show-line="false" color="#000000" :bold="false"
                :sub-title="null"></u-section>
              <u-select v-model="selectBol.householdType" :list="seleCtome"
                @confirm="selctConfirm($event,'householdType',true)"></u-select>
            </view>
          </u-form-item>
          <u-form-item label="选择房屋">
            <view @tap="selectBol.roomId=true" class="wd-100">
              <u-section :title="displayLabels || '请选择'" :show-line="false" color="#000000" :bold="false"
                :sub-title="null"></u-section>
              <u-select v-model="selectBol.roomId" :list="selectRoom"
                @confirm="selctConfirm($event,'roomId', false)"></u-select>
            </view>
          </u-form-item>
        </view>
      </u-form>
      <view class="quan-text">
        成员权限需业主设置，解锁相应功能，如：积分商城，余额消费等。
      </view>
    </view>
    <view class="po-but">
      <u-button type="primary" shape="circle" @click="getInfo">立即添加</u-button>
    </view>
  </view>
</template>

<script>
  import {
    addMemberApi
  } from '@/api/add_memeber.js'
  import {
    householdinfo
  } from '@/api/base/householdinfoApi.js'
  import {
    mapGetters
  } from 'vuex';
  export default {
    data() {
      return {
        displayLabels: '',
        displayLable: '',
        labelWidth: 0, // 初始值为 0
        form: {
          name: '',
          mobile: '',
          householdType: '',
          roomId: ''
        },
        sr: '',
        isPhoneValid: '',
        show: false,
        proprietorId: '',
        seleCtome: [], //身份信息选择
        selectRoom: [],
        selectBol: {
          householdType: false,
          visit: false,
          pree: false,
          roomId: false,
          proprietorId: false
        },
        picker: {
          star: false,
          end: false
        },
        params: {
          year: true,
          month: true,
          day: true,
          hour: true,
          minute: true,
          second: false
        },
        rules: {
          name: [{
            required: true,
            message: '请输入姓名',
            trigger: ['change', 'blur'], //'change'：数据改变时触发；'blur'：失去焦点时触发
          }],
          mobile: [{
            required: true,
            max: 11,
            message: '请输入手机号',
            trigger: ['change', 'blur']
          }]
        },
        customStyle: {
          borderRadius: '50rpx',
          textAlign: 'center',
          padding: '7rpx 20rpx'
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.$refs.uForm.setRules(this.rules);
      })
      this.getHouseInfo(); // 获取房屋信息
      this.getOptions();
    },
    computed: {
      ...mapGetters(['user_info']),
    },
    methods: {
      //身份信息字典调用
      getOptions() {
        console.log(this.$dictTools.dictList('HOUSEHOLD_TYPE'))
        this.seleCtome = this.$dictTools.dictList('HOUSEHOLD_TYPE').map(e => ({
          label: e.text,
          value: e.value
        }));
        console.log('0000====', this.seleCtome);
      },
      //根据业主获取房屋信息
      getHouseInfo() {
        const proprietorId = this.user_info.id;
        console.log(this.user_info, 'this.user_info')
        householdinfo({
            proprietorId
          })
          .then(response => {
            const newSelectData = response.map(data => ({
              value: data.roomId,
              label: data.roomInfo
            }));
            this.selectRoom = newSelectData;
            console.log(this.selectRoom, 'this.selectRoom');
          })
          .catch(error => {
            console.error('获取列表失败', error);
          });
      },
      //添加成员信息方法
      getInfo() {
        const phoneReg =
          /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/;
        const isPhoneValid = phoneReg.test(this.form.mobile);
        //姓名非空判断
        if (this.form.name == '') {
          this.$toast({
            title: "请输入姓名",
          })
          console.log(this.form.name);
        }
        //手机号码正确格式判断
        else if (this.form.mobile == '') {
          this.$toast({
            title: "请填写手机号",
          });
        } else if (isPhoneValid != true) {
          uni.showToast({
            title: '手机号格式有误',
            image: '/static/images/icon_warning.png',
            duration: 2000
          })
          console.log(isPhoneValid);
        } else if (this.form.roomId == '') {
          this.$toast({
            title: "请选择房屋",
          });
          console.log(this.form.roomId)
        } else {
          //调用添加成员信息接口
          addMemberApi(this.form).then(respond => {
            console.log(respond);
            uni.showToast({
                title: '添加成功',
                image: '/static/images/icon_success.png',
                duration: 2000
              }),
              setTimeout(() => { //添加成员信息成功后定时返回上一界面
                uni.switchTab({
                  url:'masterPack/index/me'
                })
              }, 1000)
          })
        }
        console.log(this.form);
      },

      openFamilyTwo() {
        uni.navigateTo({
          url: '/subPack/familyTwo'
        })
      },

      submit() {
        this.$refs.uForm.validate(valid => {
          if (valid) {
            console.log('验证通过');
          } else {
            console.log('验证失败');
          }
        });
      },

      selctConfirm(e, type, ishouseType) {
        if (ishouseType) {
          this.form[type] = e[0].value;
          this.displayLable = e[0].label;
          console.log('11111', this.form[type])
          console.log('2222', this.displayLable)
        } else {
          this.form[type] = e[0].value;
          this.displayLabels = e[0].label;
          console.log('11111', this.form[type])
          console.log('2222', this.displayLables)
        }
      },
      carKey(e, index) {
        this.form.license[index].tips += e
      }
    },
    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  }
</script>

<style lang="scss" scoped>
  .familyAuthorization-box {
    height: calc(100vh - 250rpx);
    overflow: auto;
  }

  .quan-text {
    text-align: center;
    padding: 20rpx 120rpx;
    color: #999;
  }

  .po-but {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 30rpx 20rpx;
    box-shadow: 0px -5px 5px -5px rgba(0, 0, 0, 0.2);
  }

  .item-box {
    position: relative;
    padding: 0 30rpx;
    background-color: #fff;

    &.visit {
      display: flex;
      justify-content: space-between;
    }

    .jt-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: no-repeat;
    }

    .item-text {
      line-height: 85rpx;
      text-align: center;
      color: $-color-but-wy+30;
    }
  }

  .cp-flex {
    display: flex;
  }

  .but-right {
    border: 1px solid $-color-but-wy;
    color: $-color-but-wy;
    border-radius: 50rpx;
    text-align: center;
    padding: 7rpx 20rpx;
  }

  /deep/.u-form-item {
    padding: 10rpx 10rpx 10rpx 0;

    .u-form-item--left__content__label {
      padding: 0 !important;
    }

    .u-form-item--left {
      flex: 0 0 auto !important;
      width: 160rpx !important;
    }

    .u-form-item__message {
      padding-left: 160rpx !important;
    }
  }
</style>